<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Vue - diff</title>
  <script src="/vue.js"></script>
</head>
<body>
  <div id="demo">
    <h1>虚拟DOM</h1>
    <p>{{foo}}</p>
  </div>

  <script>
    const app = new Vue({
      el: '#demo',
      data: { // 根 data -- 1
        foo: 'foo'
      },
      mounted() {
        setTimeout(() => {
          const len = this.getRandom(6)
          console.log('字符串长度=', len)
          let foo = ''
          for (let i = 0; i < len; i++) {
            foo = foo + this.getCharCodeAt()
          }
          this.foo = foo
          console.log('结果=', foo)
          console.log('请刷新页面，查看下一次')
        }, 1500);
      },
      methods: {
        getRandom(step) {
          return Math.round(Math.random() * step + 2)
        },
        getCharCodeAt() {
          const start = 65
          const end = 90
          const sub = end - start - 2
          const code = this.getRandom(sub) + start
          const result = String.fromCharCode(code)
          return result
        }
      }
    })
  </script>
</body>
</html>